<template>
  <div>
    <!-- 面板信息 -->
    <div class="body-box">
      <Row :gutter="20">
        <Col span="6">
          <div class="panel-item">
            <div class="panel-item-head">
              <Icon type="md-person" />
              <span>会员数</span>
            </div>
            <div class="panel-item-info">20000</div>
          </div>
        </Col>
        <Col span="6">
          <div class="panel-item panel-item-2">
            <div class="panel-item-head">
              <Icon type="md-walk" />
              <span>跑团数</span>
            </div>
            <div class="panel-item-info">20000</div>
          </div>
        </Col>
        <Col span="6">
          <div class="panel-item panel-item-3">
            <div class="panel-item-head">
              <Icon type="ios-baseball" />
              <span>活动数</span>
            </div>
            <div class="panel-item-info">20000</div>
          </div>
        </Col>
        <Col span="6">
          <div class="panel-item panel-item-4">
            <div class="panel-item-head">
              <Icon type="md-person-add" />
              <span>今日注册</span>
            </div>
            <div class="panel-item-info">20000</div>
          </div>
        </Col>
      </Row>
    </div>
    <!-- 待办事项 -->
    <div class="body-box">
      <window-title title="待办事项"></window-title>
      <Row :gutter="20">
        <Col span="6">
          <div class="index-to-do" @click="toPush(1)">
            <Icon type="md-card" />
            <span>跑团认证申请（2）</span>
          </div>
        </Col>
        <Col span="6">
          <div class="index-to-do index-to-do-2"  @click="toPush(2)">
            <Icon type="ios-cash" />
            <span>跑团提现申请（2）</span>
          </div>
        </Col>
        <Col span="6">
          <div class="index-to-do index-to-do-3"  @click="toPush(3)">
            <Icon type="md-document" />
            <span>活动需求申请（2）</span>
          </div>
        </Col>
        <Col span="6">
          <div class="index-to-do index-to-do-4"  @click="toPush(4)">
            <Icon type="md-notifications" />
            <span>用户投诉建议（2）</span>
          </div>
        </Col>
      </Row>
    </div>
    <!-- 折线图 -->
    <div class="body-box">
      <window-title style="margin-bottom:40px" title="数据总览"></window-title>
      <div id="main"></div>
    </div>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title.vue";
import echarts from "echarts";

export default {
  components: { windowTitle },
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    // 代办事项跳转
    toPush(index) {
      switch (index) {
        case 1:
          this.$router.push({path:'/stage/team/cation'})
          break;
      case 2:
          this.$router.push({path:'/stage/finance/cash'})
          break;
          case 3:
          this.$router.push({path:'/stage/active/needs'})
          break;
          case 4:
          this.$router.push({path:'/stage/fade/list'})
          break;
        default:
          break;
      }
    },
    drawLine() {
      var myChart = echarts.init(document.getElementById("main"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#8a70c6" // 改变坐标轴文字颜色
            }
          }
        },
        legend: {
          data: ["会员数", "跑团数", "活动数", "今日注册"]
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "会员数",
            type: "line",
            stack: "总量",
            // areaStyle: {},
            data: [1, 2, 3, 4, 5]
            // lineStyle: {
            //   color: "#ff763b",
            //   opacity: 0.3
            // }
            // areaStyle: {
            //   color: "#ff763b",
            //   opacity: 0.3
            // },
          },
          {
            name: "跑团数",
            type: "line",
            stack: "总量",
            data: [2, 18, 19, 23, 29, 33, 31]
            // lineStyle: {
            //   color: "yellow",
            //   opacity: 0.3
            // }
          },
          {
            name: "活动数",
            type: "line",
            stack: "总量",
            data: [2, 18, 26, 23, 9, 33, 12]
            // lineStyle: {
            //   color: "green",
            //   opacity: 0.3
            // }
          },
          {
            name: "今日注册",
            type: "line",
            stack: "总量",
            data: [2, 18, 19, 14, 29, 16, 31]
            // lineStyle: {
            //   color: "skyblue",
            //   opacity: 0.3
            // }
          }
        ]
      });
    }
  }
};
</script>

<style>
#main,
#main1 {
  width: 100%;
  height: 400px;
}
@import url("../../assets/css/index/index.css");
</style>